<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>逼真的玻璃卡片悬停效果</title>
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>01</h2>
          <h3>Card One</h3>
          <p>
            Realistic glass card hover effect, realistic glass card hover
            effect, realistic glass card hover effect.
          </p>
          <a href="#">Read More</a>
        </div>
      </div>
      <div class="card">
        <div class="content">
          <h2>02</h2>
          <h3>Card Two</h3>
          <p>
            Realistic glass card hover effect, realistic glass card hover
            effect, realistic glass card hover effect.
          </p>
          <a href="#">Read More</a>
        </div>
      </div>
      <div class="card">
        <div class="content">
          <h2>03</h2>
          <h3>Card Three</h3>
          <p>
            Realistic glass card hover effect, realistic glass card hover
            effect, realistic glass card hover effect, realistic glass card
            hover effect.
          </p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
    <script src="../../libs/vanilla-tilt.min.js"></script>
    <script>
      // vanilla-tilt.js是一个平滑的3D倾斜JS库，具体参数配置度娘可查到
      VanillaTilt.init(document.querySelectorAll(".card"), {
        max: 15, //最大倾斜度数
        speed: 400, //倾斜转换的速度
        glare: true, //是否开启眩光效果
        "max-glare": 1, //最大眩光的不透明度
      });
    </script>
  </body>
</html>
